import "./Login.scss";
import React, {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import {Button, Col, Row, Form, Input} from "antd";
import {login, generateImageCode} from "../../api";
import MyNotification from "../../components/MyNotification/MyNotification";

export default function Login() {
    let navigate = useNavigate();
    useEffect(() => {
        if (localStorage.getItem("token")) {
            navigate("/layout");
        }
        getCode();
    }, []);
    let [loginImg, setLoginImg] = useState("");
    let [notiMsg, setNotiMsg] = useState({type: "", description: ""});
    let [form] = Form.useForm();
    const getCode = () => {
        generateImageCode().then(res => {
            setLoginImg('data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')));
        })
    }
    const onFinish = async (values) => {
        let data = await login(values.acc, values.pwd, values.code);
        // api[data.success ? "success" : "error"]({
        //     message: data.message,
        //     description: '',
        // });
        console.log();
        setNotiMsg({type: data.success ? "success" : "error", description: data.message});
        localStorage.setItem("user", data.data.user);
        localStorage.setItem("token", data.data.token);
        setTimeout(() => {
            navigate("/layout");
        }, 500)
    };
    return (
        <>
            <div className="login">
                <div className="container">
                    <h2>酒店后台管理系统</h2>
                    <Form
                        name="basic"
                        form={form}
                        labelCol={{
                            span: 5,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        initialValues={{
                            acc: "", pwd: "", code: "",
                        }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="acc"
                            rules={[{
                                required: true, message: "请输入账号!",
                            },]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="pwd"
                            rules={[{
                                required: true, message: "请输入密码!",
                            },]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item
                            label="验证码"
                            name="code"
                            rules={[{
                                required: true, message: "请输入验证码!",
                            },]}
                        >
                            <Row>
                                <Col span={18}>
                                    <Input/>
                                </Col>
                                <Col span={6}>
                                    <img
                                        style={{cursor: "pointer"}}
                                        onClick={getCode}
                                        width={95}
                                        height={30}
                                        src={loginImg}
                                        alt="验证码"/>
                                </Col>
                            </Row>
                        </Form.Item>

                        <Form.Item wrapperCol={{offset: 5, span: 16,}}>
                            <Button block type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>

                        <Form.Item wrapperCol={{offset: 5, span: 16,}}>
                            <Button block onClick={() => {
                                form.resetFields();
                            }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <MyNotification type={notiMsg.type} description={notiMsg.description}/>
            </div>
        </>
    )
}
